<template>
  <div class="fullMain">
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert"> {{alertText}}</alert>
    </div>
    <!-- 首部导航栏 -->
    <NavigationOfCalendar :flagOfCalendar.sync='flagOfCalendar'></NavigationOfCalendar>

    <!--@on-result-click="resultClick"
        :results="results"
        @on-focus="onFocus"
        @on-cancel="onCancel"
        @on-submit="onSubmit"
        v-model="value"
     -->
    <search
      @on-submit="searchSchedules"
      v-model="searchContent"
      placeholder="请输入【标题】关键字进行搜索"
      position="absolute"
      auto-scroll-to-top
      ref="search"></search>
    <!--    展示搜索的结果-->
    <h5 style="font-size: larger;margin: 0 0 0 10px;font-family: '微软雅黑';font-weight: normal" class="schedule_title">
      搜索结果</h5>
    <flexbox orient='vertical'>
      <flexbox orient='horizontal' v-for="(item,index) in this.searchSchedule" :key="index">
        <flexbox class='scheduleItemOut'>
          <flexbox-item :span='1/3' class='scheduleItemLeft' style="width: 100px">
            <img src="~static/img/download/schedule/bg_orange.png" height="70" width="70"
                 style="position: absolute;top: 3px;left: 3px" alt=""/>
            <span
              style=" position:absolute;top: 20px;left: 18px;z-index:55;display: inline-block;font-weight: lighter;text-align: center;font-size: large;">{{item.detail.weekDay}}</span>
          </flexbox-item>
          <flexbox-item style="margin: 5px 0;">
            <div>
              <span
                style="font-size:14px;;color: rgb(191,191,191);float: right;margin-right: 10px;font-family: '微软雅黑'">{{item.detail.date}}</span><br>
              <img src="~static/img/download/schedule/clock.png" height="20" width="20" alt=""/>
              <span class="schedule_title">{{item.detail.scheduleTitle}}</span>
            </div>
          </flexbox-item>
        </flexbox>
      </flexbox>
    </flexbox>

    <!--    展示一个月内的日程-->
    <h5 style="font-size: larger;margin: 0 0 0 10px;font-family: '微软雅黑 Light';font-weight: bold" class="schedule_title">
      {{monthTitle}}</h5>
    <flexbox orient='vertical'>
      <flexbox orient='horizontal' v-for="(item,index) in this.scheduleList" :key="index">
        <flexbox class='scheduleItemOut'>
          <flexbox-item :span='1/3' class='scheduleItemLeft'>
            <img src="~static/img/download/schedule/bg_bule.png" height="70" width="70"
                 style="position: absolute;top: 3px;left: 3px" alt=""/>
            <span
              style=" position:absolute;top: 15px;left: 24px;z-index:55;display: inline-block;font-weight: lighter;text-align: center;font-size: x-large;">{{item.date}}</span><br>
            <span style="position:absolute;top: 37px;left: 24px;z-index:55;font-weight: normal;font-size: 13px">{{item.weekDay}}</span>
          </flexbox-item>
          <flexbox-item style="margin: 5px 0;">
            <div v-for="titleItem in item.titleList" :key="titleItem.title">
              <img src="~static/img/download/schedule/clock.png" height="20" width="20" alt=""/>
              <span class="schedule_title">{{titleItem}}</span>
            </div>
          </flexbox-item>
        </flexbox>
      </flexbox>
    </flexbox>
    <div style="height: 20px;"></div>
  </div>
</template>

<script>
  import {XHeader, Flexbox, FlexboxItem, Search} from 'vux'
  import {mapState} from 'Vuex'
  import schedule from 'api/schedule'
  import NavigationOfCalendar from 'components/Navigation/NavigationOfCalendar.vue'

  export default {
    name: 'S_mainview',
    data () {
      return {
        isShowAlert: false, // 是否显示验证提示框
        alertText: '',//提示框内容
        flagOfCalendar: 'S_scheduleview',//顶部导航栏的标识
        searchContent: '',//模糊查询日程
        scheduleList: [],
        searchSchedule: [],
        monthTitle: '',
        showNoData: true,
      }
    },
    components: {
      XHeader,
      NavigationOfCalendar,
      Flexbox,
      FlexboxItem,
      Search
    },
    mounted () {
      this.setToday()
    },
    computed: {
      ...mapState(['reportContent', 'userInfo'])
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      // 关闭验证提示框
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      setToday () {
        let date = new Date()
        let cmonth = date.getMonth() + 1
        let day = '01'
        if (cmonth < 10) cmonth = '0' + cmonth
        const now = date.getFullYear() + '-' + cmonth + '-' + day
        this.getMonthSchedule(now)
      },
      async getMonthSchedule (monthDate) {
        this.scheduleList = []
        const monthScheduleResult = await schedule.getScheduleOfOneMonth({month: monthDate})
        console.log('monthScheduleResult', monthScheduleResult)
        if (monthScheduleResult.code === 1) {
          this.showNoData = false
          const oldData = monthScheduleResult.data
          this.monthTitle = oldData.month.substring(0, 7)
          oldData.detail.forEach(item => {
            if (item.schedule.length > 0) {
              const weekDay = this.getWeekByDay(item.day)
              let dailyScheduleTitleList = []
              for (let i = 0; i < item.schedule.length; i++) {
                dailyScheduleTitleList.push(item.schedule[i].title)
              }
              const day = item.day.substring(8, 10)
              this.scheduleList.push({
                date: day,
                weekDay: weekDay,
                titleList: dailyScheduleTitleList
              })
            }
          })
        } else {
          this.showNoData = true
        }
      },
      async searchSchedules () {
        this.searchSchedule = []
        if (this.searchContent !== '') {
          const searchResult = await schedule.getSearchSchedule(this.searchContent)
          console.log('search', searchResult)
          if (searchResult.code === 1) {
            if (searchResult.data.length === 0) {
              this.showAlert('无搜索结果')
              setTimeout(this.closeTip, 1500)
              return
            }
            const data = searchResult.data
            console.log(data)
            data.forEach(item => {
              const duringDays = this.getDuringDays(item.detail.startDate, item.detail.endDate)
              console.log(duringDays)
              for (let i = 0; i < duringDays.length; i++) {
                // const weekday = duringDays[i].getWeekday
                const weekDay = this.getWeekByDay(duringDays[i])
                console.log('weekday+++++', weekDay)
                const time = item.detail.startDate
                const detail = {
                  date: duringDays[i],
                  weekDay: weekDay,
                  scheduleTitle: item.detail.title
                }
                this.searchSchedule.push({
                    time: time,
                    detail: detail
                  }
                )
              }
              console.log('searchResult', this.searchSchedule)
            })
          }
        }
        console.log('LLLLList', this.scheduleList)
      },

      //以下两个函数为获取一段时间中的每一天
      dateFormat (date) {
        var s = ''
        var mouth = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
        var day = date.getDate() >= 10 ? date.getDate() : ('0' + date.getDate())
        s += date.getFullYear() + '-' // 获取年份。
        s += mouth + '-' // 获取月份。
        s += day // 获取日。
        return (s) // 返回日期。
      },
      getDuringDays (begin, end) {
        const duringDays = []
        var ab = begin.split('-')
        var ae = end.split('-')
        var db = new Date()
        db.setUTCFullYear(ab[0], ab[1] - 1, ab[2])
        var de = new Date()
        de.setUTCFullYear(ae[0], ae[1] - 1, ae[2])
        var unixDb = db.getTime()
        var unixDe = de.getTime()
        for (var k = unixDb; k <= unixDe;) {
          let newDate = new Date(parseInt(k))
          duringDays.push(this.dateFormat(newDate))
          k = k + 24 * 60 * 60 * 1000
        }
        return duringDays
      },
      getWeekByDay (dayValue) {
        var day = new Date(Date.parse(dayValue.replace(/-/g, '/'))) //将日期值格式化
        var today = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] //创建星期数组
        // console.log(today[day.getDay()])
        return today[day.getDay()]  //返一个星期中的某一天，其中0为星期日
      }
    },

  }
</script>

<style scoped>
  .schedule_title {
    margin-bottom: 5px;
    letter-spacing: 0.5px;
    display: inline-block;
    text-align: left;
    font-size: 17px;
    /*font-weight: bold;*/
    color: rgb(101, 101, 101);
  }

  .scheduleItemOut {
    border-radius: 5px;
    background-color: #f9f9f9;
    line-height: 30px;
    max-width: 100%;
    overflow: hidden;
    margin: 5px 5px 2px 5px;
    padding: 5px;
  }

  .scheduleItemLeft {
    padding-top: 5px;
    margin: auto auto;
    width: 75px;
    height: 75px;
    line-height: 42px;
    text-align: center;
    display: inline-block;
    position: relative;
  }

</style>
